<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--<link rel="shortcut icon" href="favicon.ico">-->
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300&subset=latin,latin-ext'
          rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,700,600,800&subset=latin,cyrillic'
          rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <link rel="stylesheet" href="css/jquery.range.css" type="text/css"/>
    <link rel="stylesheet" href="css/spotem.css" type="text/css"/>
    <script type="text/javascript" src="js/lib/angular-1.2.28.js"></script>
    <script type="text/javascript" src="js/lib/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="js/lib/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/lib/jquery.tooltipster.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery.autosize.min.js"></script>
    <script type="text/javascript" src="js/lib/apprise-v2.js"></script>
    <script type="text/javascript" src="js/lib/moment.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery.range.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    <script type="text/javascript" src="js/app/model/user.js"></script>
    <script type="text/javascript" src="js/app/model/track.js"></script>
    <script type="text/javascript" src="js/app/model/TrackPoint.js"></script>
    <script type="text/javascript" src="js/app/app.js"></script>
    <script type="text/javascript" src="js/app/mapController.js"></script>
    <script type="text/javascript">
        var app = new App();
        var trackKey = app.parseUrl('track');
        console.info('track = ' + trackKey);
        var angularApp = angular.module('spotem', []).controller('mapController', ['$scope', '$interval', MapController]);
    </script>

    <!--<script type="text/javascript" src="js/app/model/Unique.js"></script>-->
    <!--<script type="text/javascript" src="js/app/controller/Cache.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/book.js"></script>-->
    <!--<script type="text/javascript" src="js/app/controller/AuthController.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/LoginView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/UserView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/controller/BooksManager.js"></script>-->
    <!--<script type="text/javascript" src="js/app/controller/AccountManager.js"></script>-->
    <!--<script type="text/javascript" src="js/app/controller/TrManager.js"></script>-->
    <!--<script type="text/javascript" src="js/app/controller/ReportController.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/NotificationView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/ErrorView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/InputDialog.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/Currency.js"></script>-->
    <!--<script type="text/javascript" src="js/app/controller/CurrencyManager.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/Category.js"></script>-->
    <!--<script type="text/javascript" src="js/app/controller/CategoryManager.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/CategoryManagerView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/ComboView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/ListView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/Account.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/AccountsView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/AccountView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/controller/AccountManager.js"></script>-->
    <!--<script type="text/javascript" src="js/app/controller/TrManager.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/Transaction.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/TrTableView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/TrView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/TrFilter.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/TrFilterView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/AccountsFilter.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/AccountsFilterView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/Pager.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/TagsFilter.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/Tag.js"></script>-->
    <!--<script type="text/javascript" src="js/app/controller/TagManager.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/TagsFilterView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/DateFilter.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/BoolFilter.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/CategoriesFilter.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/CategoriesFilterView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/view/TreeComboView.js"></script>-->
    <!--<script type="text/javascript" src="js/app/model/Sorting.js"></script>-->
    <!--&lt;!&ndash;<script type="text/javascript" src="js/app/"></script>&ndash;&gt;-->

    <!--<script type="text/javascript" src="js/app/Application.js"></script>-->
    <!--<script type="text/javascript" src="js/app/common/jsUtils.js"></script>-->
    <!--<script type="text/javascript" src="js/app/common/uiUtils.js"></script>-->

    <script type="text/javascript">
        $(document).ready(function () {
            // fix width and height of modal window
            // http://www.jqwidgets.com/community/topic/jumpy-scroll-bar-on-the-main-window-with-ismodal-enabled/
//            $('.jqx-window-modal').css('height', $(window).height());
//            $('.jqx-window-modal').css('width', $(window).width());
            /*
             document.body.scroll = "no";
             document.body.style.overflow = 'hidden';
             document.height = window.innerHeight;
             */
            /*
             $(window).resize(function() {
             if(this.resizeTO) clearTimeout(this.resizeTO);
             this.resizeTO = setTimeout(function() {
             $(this).trigger('resizeEnd');
             }, 200);
             });
             */

            $('.tooltip').tooltipster();

            (function ($) {

                var o = $({});

                $.subscribe = function () {
                    o.on.apply(o, arguments);
                };

                $.subscribeOne = function () {
                    o.one.apply(o, arguments);
                };

                $.unsubscribe = function () {
                    o.off.apply(o, arguments);
                };

                $.publish = function () {
                    o.trigger.apply(o, arguments);
                };

            }(jQuery));

            $('.range-slider').jRange({
                from: 0,
                to: 120,
                step: 1,
                scale: [0,20,40,60,80,100,120],
                format: '%s',
                width: 200,
                showLabels: true,
                isRange : true,
                onstatechange: function(value) {
//                    console.info(this);
                    if(this.options.changeTimer != null) {
                        clearTimeout(this.options.changeTimer);
                    }
                    var self = this;
                    self.options.changeTimer = setTimeout(function () {
                        console.info(value);
                        self.options.changeTimer = null;
                        $.publish('speed-range-changed', value);
                    }, 1000);
                },
                changeTimer: null,
                mapCtrl: null
            });

            $.subscribe('speed-range-changed', function(event, value) {
                var limits = value.split(',');
                window.mapCtrl.setSpeedLimits(limits[0], limits[1]);
            });

//            var app = new Application();
//            app.init();
        });
    </script>
    <title>SpotEm</title>
</head>
<body data-ng-app="spotem" class='default body main-background'>
    <div class="mainDiv">
        <table width="100%" class="central-widget">
            <thead>
            <tr class="header">
                <td width="30%" align="left">
                    <a href="index.html" class="logo-main">SpotEm</a>
                </td>
                <td width="40%" align="center">
                    <div id="notification" class="notification"></div>
                </td>
                <td width="30%" align="right">
                    <div id="userInfo" style="text-align: right;"></div>
                </td>
            </tr>
            </thead>
            <tfoot>
            <tr class="footer">
                <td colspan="3">
                    Snup & Brova © 2014
                </td>
            </tr>
            </tfoot>
            <tbody>
            <tr>
                <td>
                    <div id="errorPanel"></div>
                </td>
            </tr>
            <tr class="mainContent">
                <td colspan="3" align="left">
                    <div id="mainPanel" data-ng-controller="MapController as mapCtrl" data-ng-init="mapCtrl.init('map'); mapCtrl.toggleAutoupdate();">
                        <table width="100%">
                            <tr><td valign="top" align="left" width="20%" colspan="2">
                                <form novalidate>
                                    <input type="text" data-ng-model="mapCtrl.trackKey"/>
                                    <button ng-click="mapCtrl.loadMap()">Искать трек</button>
                                </form>
                            </td></tr>
                            <tr><td valign="top" align="left" width="15%">
                                <table class="content-panel">
                                    <tr><td>Трек:</td><td>{{mapCtrl.track.key}}</td>
                                    <tr><td>Владелец:</td><td>{{mapCtrl.track.owner.login}}</td>
                                    <tr><td>Дистанция:</td><td>{{mapCtrl.track.distance | number:2}} км</td>
                                    <tr><td>Текущая скорость:</td><td>{{mapCtrl.track.speed | number:1}} км/ч</td>
                                    <tr><td>Средняя скорость:</td><td>{{mapCtrl.track.avgSpeed | number:1}} км/ч</td>
                                    <tr><td>Средняя скорость движения:</td><td>{{mapCtrl.track.avgMoveSpeed | number:1}} км/ч</td>
                                    <tr><td>Время в пути:</td><td>{{Math.floor(mapCtrl.track.time / 3600)}}ч {{Math.floor((mapCtrl.track.time % 3600) / 60)}}мин</td>
                                    <tr><td>Время движения:</td><td>{{Math.floor((mapCtrl.track.time - mapCtrl.track.stopTime) / 3600)}}ч {{Math.floor(((mapCtrl.track.time - mapCtrl.track.stopTime) % 3600) / 60)}}мин</td>
                                    <tr><td>Время стоянки:</td><td>{{Math.floor(mapCtrl.track.stopTime / 3600)}}ч {{Math.floor((mapCtrl.track.stopTime % 3600) / 60)}}мин</td>
                                    <tr><td>Последние данные получены:</td><td>{{Math.floor(mapCtrl.track.getAge() / 3600)}}ч {{Math.floor((mapCtrl.track.getAge() % 3600) / 60)}}мин назад</td>
                                    <tr><td colspan="2"><form novalidate>
                                        <hr>
                                        <input type="checkbox" data-ng-checked="mapCtrl.isAutoupdate()" data-ng-click="mapCtrl.toggleAutoupdate()"/>обновлять автоматически
                                        </form></td></tr>
                                    <tr><td colspan="2" height="40px">
                                        <input class="range-slider" type="hidden" value="{{mapCtrl.speedLimits.low}},{{mapCtrl.speedLimits.normal}}"/>
                                    </td></tr>
                                </table>
                            </td><td width="85%">
                                <div id="map" data-ng-show="mapCtrl.track.points.length > 0" class="map"></div>
                                <div id="mapEmpty" data-ng-show="mapCtrl.track.key != null && mapCtrl.track.points.length == 0" class="map">
                                    Трек "{{mapCtrl.track.key}}" не найден
                                </div>
                            </td></tr>
                            <!--<tr><td colspan="2">foo</td></tr>-->
                        </table>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
